
<!-- Friend Item -->

<div class="friend-item">
	<div class="friend-header-thumb">
		<img src="img/friend15.jpg" alt="friend">
	</div>

	<div class="friend-item-content">

		<div class="more">
			<svg class="olymp-three-dots-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use></svg>
			<ul class="more-dropdown">
				<li>
					<a href="#">Report Profile</a>
				</li>
				<li>
					<a href="#">Block Profile</a>
				</li>
				<li>
					<a href="#">Turn Off Notifications</a>
				</li>
			</ul>
		</div>
		<div class="friend-avatar">
			<div class="author-thumb">
				<img src="img/avatar22.jpg" alt="author">
			</div>
			<div class="author-content">
				<a href="#" class="h5 author-name">Marie Claire Stevens</a>
				<div class="country">Los Angeles, CA</div>
			</div>
		</div>

		<div class="swiper-container swiper-swiper-unique-id-4 initialized swiper-container-horizontal"  >
			<div class="swiper-wrapper" style="width: 872px; transform: translate3d(-218px, 0px, 0px); transition-duration: 0ms;"><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="1" style="width: 218px;">
				<p class="friend-about" data-swiper-parallax="-500">
					Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and full-time mother.
				</p>

				<div class="friend-since" data-swiper-parallax="-100">
					<span>Friends Since:</span>
					<div class="h6">December 2014</div>
				</div>
			</div>
				<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 218px;">
					<div class="friend-count" data-swiper-parallax="-500">
						<a href="#" class="friend-count-item">
							<div class="h6">87</div>
							<div class="title">Friends</div>
						</a>
						<a href="#" class="friend-count-item">
							<div class="h6">196</div>
							<div class="title">Photos</div>
						</a>
						<a href="#" class="friend-count-item">
							<div class="h6">8</div>
							<div class="title">Videos</div>
						</a>
					</div>
					<div class="control-block-button" data-swiper-parallax="-100">
						<a href="#" class="btn btn-control bg-blue">
							<svg class="olymp-happy-face-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
						</a>

						<a href="#" class="btn btn-control bg-purple">
							<svg class="olymp-chat---messages-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
						</a>

					</div>
				</div>

				<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 218px;">
					<p class="friend-about" data-swiper-parallax="-500">
						Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and full-time mother.
					</p>

					<div class="friend-since" data-swiper-parallax="-100">
						<span>Friends Since:</span>
						<div class="h6">December 2014</div>
					</div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 218px;">
					<div class="friend-count" data-swiper-parallax="-500">
						<a href="#" class="friend-count-item">
							<div class="h6">82</div>
							<div class="title">Friends</div>
						</a>
						<a href="#" class="friend-count-item">
							<div class="h6">204</div>
							<div class="title">Photos</div>
						</a>
						<a href="#" class="friend-count-item">
							<div class="h6">27</div>
							<div class="title">Videos</div>
						</a>
					</div>
					<div class="control-block-button" data-swiper-parallax="-100">
						<a href="#" class="btn btn-control bg-blue">
							<svg class="olymp-happy-face-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
						</a>

						<a href="#" class="btn btn-control bg-purple">
							<svg class="olymp-chat---messages-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
						</a>

					</div>
				</div></div>

			<!-- If we need pagination -->
			<div class="swiper-pagination pagination-swiper-unique-id-4 swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span></div>
		</div>
	</div>
</div>

<!-- ... end Friend Item -->